<template>
	<div class="home">
		<div class="img-box">
			<img alt="Vue logo" src="../assets/logo.png" />
		</div>
		<div id="container"></div>
	</div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref, shallowRef } from "vue";
import { Graph, NodeEvent, treeToGraphData } from "@antv/g6";
const dataList = ref({});
const fetchList = async () => {
	return new Promise((resolve) => {
		setTimeout(() => {
			dataList.value = {
				id: "0",
				name: "root",
				hasChildren: true,
				children: [
					{
						id: "1",
						name: "子节点1",
						hasChildren: false,
					},
					{
						id: "2",
						name: "子节点2",
						hasChildren: true,
						children: [
							{
								id: "3",
								name: "孙节点",
								hasChildren: false,
							},
						],
					},
				],
			};
			resolve();
		}, 60);
	});
};
// 实例存储对象
let graph = shallowRef();
// 创建G6图实例
const createGraph = () => {
	return new Graph({
		container: "container",
		autoFit: {
			type: "view", // 自适应类型：'view' 或 'center'
			options: {
				// 仅适用于 'view' 类型
				when: "overflow", // 何时适配：'overflow'(仅当内容溢出时) 或 'always'(总是适配)
				direction: "y", // 适配方向：'x'、'y' 或 'both'
			},
			animation: {
				// 自适应动画效果
				duration: 1000, // 动画持续时间(毫秒)
				easing: "ease-in-out", // 动画缓动函数
			},
		},
		autoResize: true,
		padding: 20,
		behaviors: ["drag-canvas", "zoom-canvas", "optimize-viewport-transform"],
		edge: {
			type: "polyline",
			style: {
				radius: 4,
				router: {
					type: "orth",
				},
			},
		},
		layout: {
			type: "indented",
			indent: 80, // 缩进量
			getHeight: () => 40,
			getWidth: () => 100,
			direction: "LR",
		},
		node: {
			type: "rect",
			style: (d) => {
				return {
					size: [100, 40],
					cursor:
						d?.hasChildren && d?.children?.length == 0 ? "pointer" : "auto",
					labelText: d?.name,
					labelWordWrap: true,
					labelWordWrapWidth: 100,
					labelPlacement: "center",
					labelMaxWidth: 100,
					labelFontSize: 12,
					labelFill: "#fff",
				};
			},
		},
	});
};
// 双击收起或者展开
const handleNodeDbclick = async (evt) => {
	const { target } = evt;
	const nodeData = graph.value?.getNodeData(target.id);
	if (nodeData?.children?.length && !nodeData?.style?.collapsed) {
		await graph.value?.collapseElement(target.id);
	} else if (nodeData?.children?.length) {
		await graph.value?.expandElement(target.id);
	}
};
// 点击事件
const handleNodeClick = async (evt) => {
	console.log("点击了");
	console.log(evt);
};
const initData = async () => {
	await fetchList();
	graph.value?.setData({ ...treeToGraphData(dataList.value) });
	await graph.value?.render();
};
// 初始化图
const init = async () => {
	graph.value = createGraph();
	// 注册监听事件
	graph.value.on(NodeEvent.CLICK, handleNodeClick);
	graph.value.on(NodeEvent.DBLCLICK, handleNodeDbclick);
	initData();
};
onMounted(() => {
	init();
});
onBeforeUnmount(async () => {
	await graph.value?.off();
	await graph.value?.destroy();
});
</script>
<style lang="less" scoped>
.home {
	width: 100%;
	height: 100%;
	display: flex;
	flex: 1;
	flex-direction: column;
	.img-box {
		height: 100px;
		img {
			height: 100px;
		}
	}
	.container {
		flex: 1;
	}
}
</style>
